<template>
  <div style="width: 100%; height: 100%; display: flex; flex-direction: column;overflow:hidden;">
    <div
      style="
        font-size: 20px;
        color: white;
        width: 100%;
        text-align: left;
        margin-bottom: 10px;
        height: 30px;
      "
    >
      添加节目单
    </div>
    <div
      style="
        width: 100%;
        flex:1;
        
        border-radius: 10px;
        background: #1c1c1c;
        border: solid 2px #404040;
        display: flex;
        flex-direction: column;
        align-items: center;
      "
    >
      <div
        style="
          width: 100%;
          height: 50px;
          background: #383f3d;
          border-radius: 10px 10px 0 0;
          display: flex;
          justify-content: space-between;
          align-items: center;
        "
      >
        <div
          style="
            display: flex;
            align-items: center;
            color: #878888;
            cursor: pointer;
          "
        >
          <div>《</div>
          <div style="margin-left: 10px">返回</div>
        </div>
        <div style="color: #fcfcfc">添加点播节目单</div>
        <div
          style="
            display: flex;
            align-items: center;
            color: #878888;
            cursor: pointer;
          "
        >
          <img
            src="../assets/refresh.png"
            style="width: 15px; height: 15px"
            alt=""
          />
          <div style="margin-left: 10px">刷新</div>
        </div>
      </div>
      <div
        style="
          width: 100%;
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
        "
      >
        <div
          v-if="(form.programType = '视频')"
          style="width: 85%; display: flex; margin: 20px 0"
        >
          <div style="width: 120px; text-align: right; color: #cecece">
            预览效果
          </div>
          <div
            :style="{
              width: previewWinInfo.width + 'px',
              height: previewWinInfo.height + 'px',
            }"
            style="background: black; margin-left: 10px"
          >
            <vdr
              :draggable="true"
              :w="100"
              :h="100"
              :x="0"
              :y="0"
              :z="1"
              :parent="true"
            >
              <div style="width: 100%; height: 100%; background: white"></div>
            </vdr>
          </div>
        </div>
        <div
          style="
            width: 100%;
            height: calc(100% - 850px);
            display: flex;
            flex-direction: column;
            align-items:center;
            overflow: auto;
          "
        >
          <div
            style="
              width: 85%;
              display: flex;
              align-items: center;
              margin: 20px 0;
            "
          >
            <div style="width: 120px; text-align: right; color: #cecece">
              点播节目单名称
            </div>
            <div
              style="
                margin-left: 10px;
                flex: 1;
                height: 40px;
                background: #303030;
                border: solid 1px #2e3d37;
                border-radius: 10px;
              "
            >
              <input
                v-model="form.programname"
                type="text"
                style="
                  width: calc(100% - 20px);
                  height: 100%;
                  background: transparent;
                  border: 0;
                  outline: 0;
                  color: #adbab6;
                "
              />
            </div>
          </div>
          <div
            style="
              width: 85%;
              display: flex;
              align-items: center;
              margin: 20px 0;
            "
          >
            <div style="width: 120px; text-align: right; color: #cecece">
              目标分辨率
            </div>
            <div
              style="
                margin-left: 10px;
                flex: 1;
                height: 40px;
                display: flex;
                align-items: center;
              "
            >
              <input
                type="number"
                placeholder="长"
                v-model="form.targetResolutionWidth"
              />
              <div style="color: white">x</div>
              <input
                type="number"
                placeholder="宽"
                v-model="form.targetResolutionHeight"
              />
            </div>
          </div>

          <div
            style="
              width: 85%;
              display: flex;
              align-items: center;
              margin: 20px 0;
            "
          >
            <div style="width: 120px; text-align: right; color: #cecece">
              节目类型
            </div>
            <div
              style="
                margin-left: 10px;
                flex: 1;
                height: 40px;
                display: flex;
                align-items: center;
              "
            >
              <el-radio-group
                @input="getResourceList()"
                v-model="form.programType"
              >
                <el-radio-button label="视频"></el-radio-button>
                <el-radio-button label="图片"></el-radio-button>
                <el-radio-button label="网页"></el-radio-button>
                <el-radio-button label="ppt"></el-radio-button>
                <el-radio-button label="文本"></el-radio-button>
              </el-radio-group>
            </div>
          </div>
          <div
            v-if="form.programType != '网页' && form.programType != '文本'"
            style="width: 85%; display: flex; margin: 20px 0"
          >
            <div style="width: 120px; text-align: right; color: #cecece">
              选择资源
            </div>
            <div
              style="
                margin-left: 10px;
                flex: 1;
                height: 400px;
                background: #303030;
                border: solid 1px #2e3d37;
                border-radius: 10px;
                display: flex;
                align-items: center;
              "
            >
              <div
                style="
                  flex: 1;
                  height: 100%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                <div
                  style="
                    width: 80%;
                    height: 80%;
                    background: #000000;
                    margin: 50px 0;
                    border-radius: 20px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    overflow: auto;
                    -ms-overflow-style: none;
                    scrollbar-width: none;
                  "
                >
                  <div
                    style="
                      width: 80%;
                      display: flex;
                      align-items: center;
                      margin-top: 20px;
                    "
                  >
                    <div style="color: #b3b3b3">选择资源：</div>
                    <div
                      style="
                        flex-shrink: 0;
                        height: 40px;
                        flex: 1;
                        background: #252424;

                        border-radius: 20px;
                        display: flex;
                        align-items: center;
                      "
                    >
                      <img
                        src="../assets/search.png"
                        style="width: 15px; height: 15px; margin-left: 20px"
                        alt=""
                      />
                      <input
                        v-model="searchForVideoList"
                        type="text"
                        style="
                          background: transparent;
                          border: 0;
                          outline: 0;
                          color: white;
                          margin-left: 10px;
                        "
                      />
                    </div>
                  </div>
                  <div
                    style="
                      display: flex;
                      align-items: center;
                      color: #e0e0e0;
                      width: 70%;
                      margin-top: 10px;
                      flex-shrink: 0;
                    "
                  >
                    <input
                      type="checkbox"
                      v-model="selectAll"
                      @input="changeSelectAll"
                    />
                    <div style="flex: 1; text-align: left; margin-left: 10px">
                      全选
                    </div>
                  </div>
                  <div
                    v-for="(item, index) in videoList"
                    :key="index"
                    style="
                      display: flex;
                      align-items: center;
                      color: #e0e0e0;
                      width: 70%;
                      margin-top: 10px;
                      flex-shrink: 0;
                    "
                  >
                    <input
                      type="checkbox"
                      v-model="item.selected"
                      @input="changeSelect(index)"
                    />
                    <div style="flex: 1; text-align: left; margin-left: 10px">
                      {{ item.file }}
                    </div>
                  </div>
                </div>
              </div>
              <div
                style="
                  flex: 1;
                  height: 100%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                <div
                  style="
                    width: 80%;
                    height: 80%;
                    background: #000000;
                    margin: 50px 0;
                    border-radius: 20px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    overflow: auto;
                    -ms-overflow-style: none;
                    scrollbar-width: none;
                  "
                >
                  <div
                    style="
                      width: 80%;
                      display: flex;
                      align-items: center;
                      margin-top: 20px;
                    "
                  >
                    <div style="color: #b3b3b3">已选择：</div>
                    <div
                      style="
                        flex-shrink: 0;
                        height: 40px;
                        flex: 1;
                        background: #252424;

                        border-radius: 20px;
                        display: flex;
                        align-items: center;
                      "
                    >
                      <img
                        src="../assets/search.png"
                        style="width: 15px; height: 15px; margin-left: 20px"
                        alt=""
                      />
                      <input
                        @input="changeInput2"
                        v-model="searchForSelectedVideos"
                        type="text"
                        style="
                          background: transparent;
                          border: 0;
                          outline: 0;
                          color: white;
                          margin-left: 10px;
                        "
                      />
                    </div>
                  </div>

                  <draggable
                    v-model="selectedVideoList"
                    handle=".drag-handle"
                    @end="onEnd"
                    style="
                      width: 100%;
                      display: flex;
                      flex-direction: column;
                      align-items: center;
                    "
                  >
                    <div
                      v-for="(item, index) in selectedVideoList"
                      :key="index"
                      style="
                        display: flex;
                        align-items: center;
                        color: #e0e0e0;
                        width: 70%;
                        margin-top: 10px;
                        flex-shrink: 0;
                        justify-content: space-between;
                      "
                    >
                      <div style="flex: 1; text-align: left; margin-left: 10px">
                        {{ item.file }}
                      </div>
                      <div style="display: flex; align-items: center">
                        <img
                          class="drag-handle"
                          src="../assets/order.png"
                          style="width: 15px; height: 15px; cursor: pointer"
                          alt=""
                        />
                        <img
                          @click="deleteVideoInSelectedVideos(index)"
                          src="../assets/删除.png"
                          style="
                            width: 15px;
                            height: 15px;
                            margin-left: 20px;
                            cursor: pointer;
                          "
                          alt=""
                        />
                      </div>
                    </div>
                  </draggable>
                </div>
              </div>
            </div>
          </div>

          <div
            v-if="form.programType == '文本'"
            style="width: 85%; display: flex; margin: 20px 0"
          >
            <div style="width: 120px; text-align: right; color: #cecece">
              文本列表
            </div>
            <div
              style="
                margin-left: 10px;
                flex: 1;
                border-radius: 10px;
                display: flex;
                flex-direction: column;
              "
            >
              <div
                v-for="(item, index) in selectedVideoList"
                :key="index"
                style="display: flex; flex-direction: column"
              >
                <div style="width: 100%; display: flex; align-items: center">
                  <input v-model="item.file" type="text" style="width: 300px" />
                  <input
                    type="number"
                    placeholder="单行速度"
                    v-model="item.oneWaySpeed"
                  />

                  <div style="color: white; margin: 0 10px">字体颜色</div>
                  <el-color-picker
                    style="margin-right: 10px"
                    v-model="item.color"
                  ></el-color-picker>
                  <div style="color: white; margin-right: 10px">行数</div>
                  <input
                    v-model="item.rowNum"
                    type="number"
                    style="width: 50px; margin-right: 10px"
                  />
                  <div style="color: white; margin-right: 10px">行间距</div>
                  <input
                    v-model="item.paddingWidth"
                    type="number"
                    style="width: 50px"
                  />
                  <img
                    src="../assets/add.png"
                    style="
                      width: 20px;
                      height: 20px;
                      margin-left: 10px;
                      cursor: pointer;
                    "
                    @click="addItemInSelected(index + 1)"
                    alt=""
                  />
                  <img
                    src="../assets/remove.png"
                    style="
                      width: 20px;
                      height: 20px;
                      margin-left: 10px;
                      cursor: pointer;
                    "
                    @click="removeItemInSelected(index)"
                    alt=""
                  />
                  <button @click="editLineAttributes(index)">编辑行属性</button>

                  <button @click="startPreview(index)">预览</button>
                </div>
                <div
                  v-if="showLinesAttribute == index && item.rowNum != null"
                  style="display: flex; flex-direction: column"
                >
                  <div
                    v-for="(item1, index1) in Number(item.rowNum)"
                    :key="index1"
                    style="display: flex; align-items: center"
                  >
                    <input
                      v-model="item.rowsAttribute[index1].width"
                      placeholder="长"
                    />
                    <input
                      v-model="item.rowsAttribute[index1].height"
                      placeholder="宽"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div
            v-if="form.programType == '文本'"
            style="width: 85%; display: flex; margin-bottom: 20px"
          >
            <div style="width: 120px; text-align: right; color: #cecece">
              起始延时
            </div>
            <div
              style="
                margin-left: 10px;
                flex: 1;
                border-radius: 10px;
                display: flex;
                align-items: center;
              "
            >
              <input v-model="form.playDelay" placeholder="播放延时" />
            </div>
          </div>

          <div
            v-if="form.programType == '文本'"
            style="width: 85%; display: flex; margin-bottom: 20px"
          >
            <div style="width: 120px; text-align: right; color: #cecece">
              起始位置
            </div>
            <div
              style="
                margin-left: 10px;
                flex: 1;
                border-radius: 10px;
                display: flex;
                align-items: center;
              "
            >
              <input v-model="form.startRow" placeholder="起始行" />
              <input v-model="form.offset" placeholder="偏移量" />
            </div>
          </div>
          <div
            v-if="form.programType == '文本'"
            style="width: 85%; display: flex; margin: 20px 0"
          >
            <div style="width: 120px; text-align: right; color: #cecece">
              预览效果
            </div>
            <div
              v-if="previewForm != null"
              style="
                width: 960px;
                height: 540px;
                background: black;
                margin-left: 10px;
                display: flex;
                flex-direction: column;
              "
            >
              <div
                style="flex: 1"
                :style="{
                  outline: 'dashed 1px grey',
                  width: previewForm.rowsAttribute[index].realWidth + 'px',
                }"
                v-for="(item, index) in Number(previewForm.rowNum)"
                :key="index"
              >
                <div
                  class="marquee-row"
                  :style="{
                    fontSize: previewForm.fontSize + 'px',
                    lineHeight: previewForm.lineHeight + 'px',
                    height: previewForm.lineHeight + 'px',
                    color: previewForm.color,
                  }"
                >
                  <div
                    class="marquee-content"
                    :ref="'animElement' + index"
                    :style="{
                      '--char-width': charWidth + 'px',
                    }"
                  >
                    {{ previewForm.file }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            v-if="form.programType == '网页'"
            style="width: 85%; display: flex; margin: 20px 0"
          >
            <div style="width: 120px; text-align: right; color: #cecece">
              网页列表
            </div>
            <div
              style="
                margin-left: 10px;
                flex: 1;
                border-radius: 10px;
                display: flex;
                flex-direction: column;
              "
            >
              <div
                v-for="(item, index) in selectedVideoList"
                :key="index"
                style="display: flex; align-items: center; margin-bottom: 20px"
              >
                <input v-model="item.file" type="text" style="width: 300px" />
                <input
                  type="number"
                  placeholder="持续时间"
                  v-model="item.totalMs"
                />
                <img
                  src="../assets/add.png"
                  style="
                    width: 20px;
                    height: 20px;
                    margin-left: 10px;
                    cursor: pointer;
                  "
                  @click="addItemInSelected(index + 1)"
                  alt=""
                />
                <img
                  src="../assets/remove.png"
                  style="
                    width: 20px;
                    height: 20px;
                    margin-left: 10px;
                    cursor: pointer;
                  "
                  @click="removeItemInSelected(index)"
                  alt=""
                />
              </div>
            </div>
          </div>
          <div style="width: 85%; display: flex; margin: 20px 0">
            <div style="width: 120px; text-align: right; color: #cecece">
              点播方式
            </div>
            <div
              style="
                margin-left: 10px;
                flex: 1;
                height: 40px;
                background: #303030;
                border: solid 1px #2e3d37;
                border-radius: 10px;
                display: flex;
                align-items: center;
              "
            >
              <el-radio
                style="margin-left: 10px"
                v-model="form.demandWay"
                :label="0"
                >在线</el-radio
              >
              <el-radio v-model="form.demandWay" :label="1">拉流</el-radio>
            </div>
          </div>
          <div
            style="
              width: 85%;
              display: flex;
              align-items: center;
              justify-content: center;
            "
          >
            <button
              @click="submitAddProgress"
              style="
                background: #33a681;
                color: #bad3cb;
                width: 100px;
                height: 40px;
              "
            >
              确定
            </button>
            <button
              style="
                background: #3a3a39;
                color: #bad3cb;
                width: 100px;
                height: 40px;
                margin-left: 10px;
              "
            >
              取消
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from "../axios/request";
import draggable from "vuedraggable";
export default {
  components: {
    draggable,
  },
  data() {
    return {
      selectAll: false,
      videoList: [],
      selectedVideoList: [],
      searchForVideoList: null,
      searchForSelectedVideos: null,
      form: {
        programname: null,
        demandWay: 0,
        programType: "视频",
        startRow: null,
        offset: null,
        playDelay: 0,
        targetResolutionWidth: 1920,
        targetResolutionHeight: 1080,
      },
      previewForm: null,
      duration1: null,
      charWidth: null,
      duration2: null,
      rowArr: null,
      showLinesAttribute: null,
      maxWidth: null,
      previewWinInfo: {
        width: 960,
        height: 540,
      },
    };
  },
  watch: {
    "form.targetResolutionWidth"(newVal, oldVal) {
      console.log(`属性值从 ${oldVal} 变为 ${newVal}`);
      this.previewWinInfo.height =
        (this.previewWinInfo.width / this.form.targetResolutionWidth) *
        this.form.targetResolutionHeight;
    },
    "form.targetResolutionHeight"(newVal, oldVal) {
      console.log(`属性值从 ${oldVal} 变为 ${newVal}`);
      this.previewWinInfo.height =
        (this.previewWinInfo.width / this.form.targetResolutionWidth) *
        this.form.targetResolutionHeight;
    },
  },
  methods: {
    editLineAttributes(faIndex) {
      faIndex = Number(faIndex);
      this.showLinesAttribute = faIndex;
      this.selectedVideoList[faIndex].rowsAttribute = [];
      const arrLength = Number(this.selectedVideoList[faIndex].rowNum);
      for (let index = 0; index < arrLength; index++) {
        this.selectedVideoList[faIndex].rowsAttribute.push({
          width: 0,
          height: 0,
        });
      }
    },
    culculateRowRealSize(faIndex) {
      // 找出最长的Width
      this.maxWidth = 0;
      for (
        let index = 0;
        index < this.selectedVideoList[faIndex].rowsAttribute.length;
        index++
      ) {
        const element = this.selectedVideoList[faIndex].rowsAttribute[index];
        if (element.width > this.maxWidth) {
          this.maxWidth = Number(element.width);
        }
      }
      // 开始计算比例
      const rate = 960 / this.maxWidth;
      // 开始计算在预览界面的大小
      for (
        let index = 0;
        index < this.selectedVideoList[faIndex].rowsAttribute.length;
        index++
      ) {
        const element = this.selectedVideoList[faIndex].rowsAttribute[index];
        element.realWidth = Number(element.width) * rate;
      }
    },
    startPreview(index) {
      this.previewForm = null;
      this.culculateRowRealSize(index);
      this.$nextTick(() => {
        this.previewForm = this.selectedVideoList[index];
        this.previewForm.lineHeight = Math.floor(
          540 / Number(this.previewForm.rowNum)
        );
        this.previewForm.fontSize =
          this.previewForm.lineHeight - this.previewForm.paddingWidth;
        this.$nextTick(() => {
          this.duration1 = 960 / Number(this.previewForm.oneWaySpeed);
          this.measureCharWidth();
          this.culculateDurations();
          const elements = document.querySelectorAll(".marquee-content");
          this.rowArr = elements;
          for (let index = 0; index < elements.length; index++) {
            const element = elements[index];
            element.textShowIndex = index;
          }
          let restLength = this.charWidth;

          let rowIndex = 0;
          let windowWidth = null;
          let curRestRow = null;
          while (restLength > 0) {
            curRestRow = Number(this.form.startRow) + rowIndex;
            if (curRestRow >= Number(this.previewForm.rowNum)) {
              break;
            }
            windowWidth = this.previewForm.rowsAttribute[curRestRow].realWidth;
            const lastElement = elements[curRestRow];
            // const lastElement = elements[index];
            lastElement.duration1 =
              this.previewForm.rowsAttribute[curRestRow].realWidth /
              Number(this.previewForm.oneWaySpeed);
            lastElement.duration2 =
              this.charWidth / Number(this.previewForm.oneWaySpeed);

            // 构建动态keyframe
            const newStyle = document.createElement("style");
            if (rowIndex == 0) {
              newStyle.textContent = `
      @keyframes startRow${curRestRow} {
        0% {
          transform: translateX(-${
            windowWidth * ((100 - this.form.offset) / 100)
          }px)
        }
        100% {
          transform: translateX(-${windowWidth}px);
        }
      }
    `;
              lastElement.style.transform = `translateX(-${
                windowWidth * ((100 - this.form.offset) / 100)
              }px)`;
              document.head.appendChild(newStyle);
              lastElement.startRowDuration =
                (windowWidth * (this.form.offset / 100)) /
                Number(this.previewForm.oneWaySpeed);
              lastElement.startAnimationState = 0;
              restLength =
                restLength - windowWidth * ((100 - this.form.offset) / 100);
            } else {
              windowWidth =
                this.previewForm.rowsAttribute[curRestRow].realWidth;
              if (curRestRow >= Number(this.previewForm.rowNum)) {
                break;
              }
              newStyle.textContent = `
      @keyframes startRow${curRestRow} {
        0% {
          transform: translateX(-${
            windowWidth + (this.charWidth - restLength)
          }px)
        }
        100% {
          transform: translateX(calc(-100%));
        }
      }
    `;
              lastElement.style.transform = `translateX(-${
                windowWidth + (this.charWidth - restLength)
              }px)`;
              document.head.appendChild(newStyle);
              lastElement.startRowDuration =
                restLength / Number(this.previewForm.oneWaySpeed);
              lastElement.startAnimationState = 0;
              if (restLength > windowWidth) {
                restLength = restLength - windowWidth;
              } else {
                restLength = 0;
              }
            }
            rowIndex = rowIndex + 1;
          }
          for (let index = 0; index < this.previewForm.rowNum; index++) {
            // const element = array[index];
            // 计算自己的duration2
            const lastElement = elements[index];
            if (
              lastElement.duration1 != null &&
              lastElement.duration2 != null
            ) {
              continue;
            }
            lastElement.duration1 =
              this.previewForm.rowsAttribute[index].realWidth /
              Number(this.previewForm.oneWaySpeed);
            lastElement.duration2 =
              this.charWidth / Number(this.previewForm.oneWaySpeed);
          }
          console.log(elements);
          const playTimeOut = setTimeout(() => {
            clearTimeout(playTimeOut);
            for (let index = 0; index < rowIndex; index++) {
              console.log("startRow:" + this.form.startRow);
              console.log("index:" + index);
              const lastElement = elements[Number(this.form.startRow) + index];
              this.playAnimation(lastElement, true);
            }
          }, Number(this.form.playDelay));
        });
      });
    },
    playAnimation(element, loop) {
      const animationMonitor = () => {
        if (
          element.style.animation.includes("marquee1") ||
          element.style.animation.includes("startRow" + this.form.startRow)
        ) {
          console.log(element.style.animation);
          if (element.textShowIndex > 0) {
            const nextElement = this.rowArr[element.textShowIndex - 1];
            this.playAnimation(nextElement, loop);
          }
          element.style.animation =
            "marquee2 " + element.duration2 + "s linear forwards";
        } else {
          element.removeEventListener("animationend", animationMonitor);
          if (element.textShowIndex == 0) {
            if (loop) {
              const nextElement = this.rowArr[this.rowArr.length - 1];
              this.playAnimation(nextElement, loop);
            } else {
              // this.playText(this.curSonIndex + 1, loop);
            }
          }
        }
      };
      if (element.startAnimationState == 0) {
        element.style.animation =
          "startRow" +
          element.textShowIndex +
          " " +
          element.startRowDuration +
          "s linear forwards";
        element.startAnimationState = 1;
      } else {
        element.style.animation =
          "marquee1 " + element.duration1 + "s linear forwards";
      }

      element.addEventListener("animationend", animationMonitor);
    },
    culculateDurations() {
      this.duration2 = (this.charWidth / 960) * this.duration1;
    },
    measureCharWidth() {
      const testEl = document.createElement("span");
      testEl.style.fontSize = this.previewForm.fontSize + "px";
      testEl.style.visibility = "hidden";
      testEl.style.position = "absolute";
      testEl.style.whiteSpace = "nowrap";
      testEl.style.height = this.previewForm.fontSize + "px";
      testEl.style.background = "white";
      testEl.style.fontFamily = "system-ui";
      testEl.style.lineHeight = this.previewForm.fontSize + "px";
      testEl.textContent = this.previewForm.file;
      document.body.appendChild(testEl);
      this.charWidth = testEl.offsetWidth;
      document.body.removeChild(testEl);
    },
    removeItemInSelected(index) {
      this.selectedVideoList.splice(index, 1);
    },
    addItemInSelected(index) {
      this.selectedVideoList.splice(index, 0, {
        file: "",
        materialType: 4,
        color: "#FFFFFF",
        paddingWidth: 0,
      });
    },
    onEnd() {},
    changeInput2() {},
    async submitAddProgress() {
      let res = await request({
        url: "/program/api/addProgram",
        method: "POST",
        data: {
          command: 17,
          user_name: localStorage.getItem("user_name"),
          data: [this.form],
        },
      });
      if (res.data.status == 200) {
        let res1 = null;
        for (let index = 0; index < this.selectedVideoList.length; index++) {
          const element = this.selectedVideoList[index];
          res1 = await request({
            url: "/program/api/addItemInProgram",
            method: "POST",
            data: {
              command: 18,
              user_name: localStorage.getItem("user_name"),
              data: [
                {
                  pl_id: res.data.data.data.id,
                  pindex: index,
                  filepath: element.file,
                  duration: element.totalMs,
                  color: element.color,
                  fontSize: element.fontSize,
                  oneWaySpeed: element.oneWaySpeed,
                  rowNum: element.rowNum,
                },
              ],
            },
          });
        }
      }
    },
    deleteVideoInSelectedVideos(index) {
      this.selectedVideoList[index].selected = false;
      this.selectedVideoList.splice(index, 1);
    },
    checkAllSelect() {
      for (let index = 0; index < this.videoList.length; index++) {
        const element = this.videoList[index];
        if (element.selected != true) {
          this.selectAll = false;
          return;
        }
      }
      this.selectAll = true;
    },
    changeSelect(index) {
      const element = this.videoList[index];
      element.selected = !element.selected;
      if (element.selected) {
        this.selectedVideoList.push(element);
      } else {
        for (let index = 0; index < this.selectedVideoList.length; index++) {
          const selectedElement = this.selectedVideoList[index];
          if (selectedElement == element) {
            this.selectedVideoList.splice(index, 1);
            break;
          }
        }
      }

      this.checkAllSelect();
    },
    changeSelectAll() {
      this.selectAll = !this.selectAll;
      this.selectedVideoList = [];
      if (this.selectAll) {
        for (let index = 0; index < this.videoList.length; index++) {
          const element = this.videoList[index];
          element.selected = true;
          this.selectedVideoList.push(element);
        }
      } else {
        for (let index = 0; index < this.videoList.length; index++) {
          const element = this.videoList[index];
          element.selected = false;
        }
      }
    },
    async getResourceList() {
      this.selectedVideoList = [];
      if (this.form.programType == "网页" || this.form.programType == "文本") {
        this.addItemInSelected(0);
        return;
      }
      let res = await request({
        url:
          "/material/api/getResourceList/" +
          localStorage.getItem("user_name") +
          "/" +
          this.form.programType,
        method: "GET",
      });
      if (res.data.status == 200) {
        this.videoList = res.data.data.data;
      }
    },
  },
  mounted() {
    this.getResourceList();
  },
};
</script>

<style>
.marquee-row {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.marquee-content {
  transform: translateZ(0);
  display: inline-block;
  padding-left: 100% !important;
  will-change: transform;
  font-family: system-ui;
}

@keyframes marquee1 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-100% + var(--char-width)));
  }
}
@keyframes marquee2 {
  0% {
    transform: translateX(calc(-100% + var(--char-width)));
  }
  100% {
    transform: translateX(calc(-100%));
  }
}
</style>